let vm = {message:'hello'};
let template = `<p id="a">{{message}}</p>`;
//编译，把它变成一个render函数
let render = function(vm){
    //返回是一个虚拟DOM
    //虚拟DOM只是一个普通的JS对象，是用JS对象的方式表示DOM结构
    return {
        tag:'p',
        props:{id:'a'},
        children:vm.message
    }
}
console.log('beforeMount');
//let vdom = {tag,props,children}
//调用render函数，得到虚拟DOM
let vdom = render();
//根据虚拟DOM创建真实DOM
let app = document.createElement(vdom.tag);
//把虚拟DOM上的属性设置到DOM元素上
for(let key in vdom.props){
    app.setAttribute(key,vdom.props[key]);
}
//设置子元素
app.innerHTML = vdom.children;
vm.$el = app;
//////////////////////
vm.message='world';
//当数据发生变化时会进行更新逻辑
console.log('beforeUpdate')
let vdom2 = render();
//根据虚拟DOM创建真实DOM
let app2 = document.createElement(vdom2.tag);
//把虚拟DOM上的属性设置到DOM元素上
for(let key in vdom2.props){
    app2.setAttribute(key,vdom2.props[key]);
}
//设置子元素
app2.innerHTML = vdom.children;
document.body.replaceChild(app2,app);
vm.$el = app2;